﻿<Page x:Class="WpfViewBox.ClipPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ClipPage" Height="264" Width="728">
    <Grid Height="221">
        <Canvas  Width="182" Height="100" Background="BlanchedAlmond" HorizontalAlignment="Left" VerticalAlignment="Top" ClipToBounds="True">
            <TextBlock Background="Crimson"  Width="250" Height="50" Canvas.Left="100" Text='ClipToBounds="True"'/>
        </Canvas>

        <Canvas  Width="182" Height="100" Background="BlanchedAlmond" HorizontalAlignment="Left" VerticalAlignment="Bottom" ClipToBounds="False">
            <TextBlock Background="Crimson"  Width="143" Height="50" Canvas.Left="100" Text='ClipToBounds="False"'/>
        </Canvas>

        <Canvas  Width="154" Height="61"  HorizontalAlignment="Center" VerticalAlignment="Top" ClipToBounds="False" >
            <Canvas.Background>
                <ImageBrush  ImageSource="desert.jpg"      TileMode="FlipXY"/>
            </Canvas.Background>
            <Canvas.Clip>
                <RectangleGeometry  Rect="20,20,100,30"/>
            </Canvas.Clip>
        </Canvas>

        <Canvas  Width="192" Height="100"   HorizontalAlignment="Center" VerticalAlignment="Bottom" ClipToBounds="False" >
            <Canvas.Background>
                <ImageBrush  ImageSource="desert.jpg"      TileMode="FlipXY"/>
            </Canvas.Background>
            <Canvas.Clip>
                <EllipseGeometry Center="90,50" RadiusX="80" RadiusY="40" />
            </Canvas.Clip>
        </Canvas>
        <Canvas  Width="202" Height="60" Margin="0,0,20,0"   HorizontalAlignment="Right" VerticalAlignment="Top" ClipToBounds="False" >
            <Canvas.Background>
                <ImageBrush  ImageSource="desert.jpg"    />
            </Canvas.Background>
            <Canvas.Clip>
                <GeometryGroup>
                    <EllipseGeometry   Center="100,30"   RadiusX="100" RadiusY="30"  />
                    <EllipseGeometry   Center="50,20"   RadiusX="20" RadiusY="10"  />
                    <EllipseGeometry   Center="150,20"   RadiusX="20" RadiusY="10"  />
                    <EllipseGeometry   Center="100,50"   RadiusX="20" RadiusY="10"  />
                </GeometryGroup>
            </Canvas.Clip>
        </Canvas>
        <Image Height="107" HorizontalAlignment="Left" Margin="484,102,0,0" Source="desert.jpg" 
               Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="200"  >
            <Image.OpacityMask>
                <RadialGradientBrush>
                    <RadialGradientBrush.GradientStops>
                        <GradientStop Offset="0" Color="White"/>
                        <GradientStop Offset="1" Color="Transparent" />
                    </RadialGradientBrush.GradientStops>
                </RadialGradientBrush>
            </Image.OpacityMask>
        </Image>
    </Grid>
    
    
</Page>
